<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			
			#wrap{
				width: 300px;
				height: 30px;
				margin: 50px auto;
				user-select:none;
			}
			#wrap p{
				float: left;
				height: 30px;;
				font-size: 12px;
				color: #DB7093;
				line-height: 30px;
			}
			#wrap .list{
				float: left;
				width: 110px;
				height: 20px;
				margin-top: 5px;
				margin-left: 10px;
			}
			#wrap .list>li{
				float: left;
				width: 20px;
				height: 20px;
				background-image: url(img/star.png);
			}
			#wrap .list>li.light{
				background-position-y: 19px;
			}
			#wrap .txt{
				
				float:right;
				width: 100px;
				height: 100px;
				border: 1px dotted #DB7093;
			}
		</style>
	</head>
	<body>
		
		<div id="wrap">
			<p>星型评分</p>
			<ul class="list">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<p class="txt">提示：请认真给文章打分</p>
			<script>
				let aStar = document.querySelectorAll("#wrap .list>li"),
					oList = document.querySelector("#wrap .list"),
					oTxt = document.querySelector("#wrap .txt"),
					len = aStar.length,
					index = -1,
					arrTxt = [
						"提示：请认真给当前的文章打分",
						"非常辣鸡",
						"辣鸡",
						"一般",
						"不错",
						"贼jr六"
					];

				
				
				for(let i=0;i<len;i++){
					aStar[i].onmouseenter = function(){
						for(let j=0;j<len;j++){
						//j<=i?aStar[j].className = "light":aStar[j].className = "";
							aStar[j].className = j<=i?"light":"";
							oTxt.innerHTML = arrTxt[i+1];
						}
					}
					aStar[i].onclick = function(){
						
						index = i;						
					}
				}
				oList.onmouseleave = function(){
					
					for(let i=0;i<len;i++){
						aStar[i].className = i<=index?"light":"";
					}
					oTxt.innerHTML = arrTxt[index+1];
				}
			</script>
		</div>
	</body>
</html>
